<template>
  <div class="box">
    <!-- <span class="title">审批中心</span> -->
    <Tabs v-model="tabKey" class="tabs-app">
      <TabPane label="待办" name="ToDo" class="tab-pane">
        <ToDo v-if="tabKey == 'ToDo'"></ToDo>
      </TabPane>
      <TabPane label="已办" name="Done" class="tab-pane">
        <Done v-if="tabKey == 'Done'"></Done>
      </TabPane>
      <TabPane label="待阅" name="toRead" class="tab-pane">
        <toRead v-if="tabKey == 'toRead'"></toRead>
      </TabPane>
      <TabPane label="已阅" name="read" class="tab-pane">
        <read v-if="tabKey == 'read'"></read>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
import read from './read.vue'
import toRead from './toRead.vue'
import Done from './Done.vue'
import ToDo from './ToDo'
import { mapState } from 'vuex'
export default {
  name: 'myReminder',
  components: {
    read,
    toRead,
    Done,
    ToDo
  },
  data() {
    return {
      tabKey: 'ToDo'
    }
  },
  computed: {
    ...mapState(['menuList'])
  },
  created() {
    if (!this.menuList || this.menuList.length == 0) {
      this.$store.dispatch('getMenuList')
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  display: flex;
  flex-direction: column;
  .tabs-app {
    flex: 1;
    display: flex;
    flex-direction: column;
    /deep/.ivu-tabs-content {
      flex: 1;
    }
  }
}
.title {
  font-size: 18px;
  font-weight: bold;
  padding-left: 14px;
  padding-top: 8px;
  padding-bottom: 0px;
}
/deep/.single-table-con {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
